import { ChangeEvent, useState } from "react";
import { useDispatch } from "react-redux";
import { searchUserListAsync } from "../UserList/userSlice.ts";
import { AppDispatch } from "../../store";

export default function Search() {
  // const [keyword, setKeyword] = useState<string>("");
  const [keyword, setKeyword] = useState("");
  // react是合成事件，event和原生event不一样，不能使用原生类型 -> 所以才从react引入
  const handleChange = (e: ChangeEvent) => {
    setKeyword((e.target as HTMLInputElement).value);
  };

  const dispatch = useDispatch<AppDispatch>();

  const handleClick = async () => {
    // 调用异步action
    dispatch(searchUserListAsync(keyword));
  };

  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input
          type="text"
          placeholder="enter the name you search"
          onChange={handleChange}
        />
        <button onClick={handleClick}>Search</button>
      </div>
    </section>
  );
}
